import Vue from 'vue'
import Vuex from 'vuex'
//数据持久化依赖
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    listarr:JSON.parse(localStorage.getItem("todos") || '[]'),
    isactive:'All',//当前所在的选项卡
    isallflag:false,//标志变量全选
  },
  mutations: {
    clickall:function(state){
        if(!state.isallflag){
            state.listarr.map(v => {
                v.ischecked = true;
            })
            state.isallflag = true;
        }else{
            state.listarr.map(v => {
                v.ischecked = false;
            })
            state.isallflag = false;
        }
    },
    delli:function(state,{payload}){
        state.listarr.splice(payload.index,1);
    },
    inp:function(state,{payload}){
        state.listarr.push(payload);

    },
    clickthree:function(state,{payload}){
        // console.log(payload.ss);
        state.isactive = payload.ss;
    },
    //清除已经完成的
    clear:function(state){
        state.listarr = state.listarr.filter(v => {
        return !v.ischecked;
        })
    },

  },
  actions: {
  },
  modules: {
  },
  getters:{
    isactive:function(state){
        return state.isactive;
    },
    filtertodos:function(state){
        if(state.isactive === "All"){
          return state.listarr;
        }else if(state.isactive === "Active"){
          return state.listarr.filter(v => {
            return !v.ischecked;
          })
        }else{
          return state.listarr.filter(v => {
            return v.ischecked;
          })
        }
      },
      count:function(state){
        let num = state.listarr.filter( v=> {
          return !v.ischecked; //返回没有选中的
        });
        // console.log(num.length)
        return num.length;
      },
  },
  plugins: [createPersistedState()],
})
